<template>
	<view class="login_container">
		<!-- <uni-section title="新增联系人" type="line"> -->
			<view class="content">
				<!-- 基础表单校验 -->
				<h1 class="content_title">电话本</h1>
				<uni-forms ref="valiForm" label-align="right" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="" name="username">
						<uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item label="" name="password">
						<uni-easyinput type="password" v-model="valiFormData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button class="sumbmit_btn" type="primary" @click="submit('valiForm')">登录</button>
			</view>
		<!-- </uni-section> -->
	</view>
</template>

<script>
	import { getRequest, postRequest } from '@/utils/request.js'
	export default {
		data() {
			return {
				valiFormData: {
					username: '',
					password: ''
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能空'
						}]
					}
				},
			};
		},

		methods: {
			setValue(name,value){
				// 设置表单某项对应得值来触发表单校验
				// 接受两个参数，第一个参数为表单域的 name ，第二个参数为表单域的值
				this.$refs.form.setValue(name,value)
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					this.login()
					// uni.showToast({
					// 	title: `校验通过`
					// })
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 登录
			login(){
				postRequest('users/login', this.valiFormData).then(res => {
					console.log(res)
					if(res.code == '0'){
						sessionStorage.setItem('authorization', res.data.token)
						console.log(res.code)
						uni.switchTab ({
							url: '/pages/index/index',
							complete:(com)=>{
								console.log(com)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.login_container{
	height: 100vh;
	padding: 0 60rpx;
	padding-top: 40%;
	// display: flex;
	// flex-direction: column;
	// justify-content: center;
	// align-items: center;
	box-sizing: border-box;
	background-color: #fff;
	.content_title{
		text-align: center;
		padding-bottom: 80rpx;
	}
	.sumbmit_btn{
		margin-top: 80rpx;
	}
}
</style>
